<template>
  <div :class="['box', $ua.isFromPc() ? 'z-web' : 'z-phone']">
    <div class="container" :style="extendHeader ? 'overflow:hidden' : ''">
      <!-- /顶部导航栏 -->
      <div
        v-if="$ua.isFromPc()"
        @touchmove.prevent
        :class="[
          'header',

          extendHeader ? 'extend-header' : '',
          $store.state.router.activeRouter == '/home' ? 'home-header' : '',
        ]"
      >
        <!-- {{ headMenu }} -->
        <!-- logo -->
        <div class="logo">
          <div class="text">艺览天下之海淀</div>
          <!-- 展开顶部导航栏以后logo下的搜索框 -->
          <div v-show="extendHeader" class="search">
            <el-input
              placeholder="搜索"
              v-model="newSearch"
              @keyup.enter.native="handleSearch(newSearch)"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <div class="hot-search">
              <div class="title">搜索推荐：</div>
              <div class="desc">
                <span
                  v-for="(item, index) in searchList"
                  :key="index"
                  @click="handleSearch(item)"
                >
                  {{ item }}
                </span>
              </div>
            </div>
          </div>
        </div>
        <div v-show="!extendHeader" class="custom-menu">
          <el-menu
            :default-active="activeRouter"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item
              v-for="item in myMenu"
              :key="item.path"
              :index="item.path"
            >
              <nuxt-link class="nav-link" :to="item.path">
                {{ item.meta.title }}
              </nuxt-link>
            </el-menu-item>
          </el-menu>
        </div>
        <div v-show="extendHeader" class="new-custom-menu">
          <div
            v-for="(item, index) in myMenu"
            :key="item.path"
            @click="handleRouter(item.path)"
            class="chinese"
          >
            <nuxt-link class="nav-link" :to="item.path">
              {{ item.meta.title }}
            </nuxt-link>
          </div>
        </div>
        <div
          v-show="!extendHeader"
          class="search-btn"
          :style="extendHeader ? 'opacity:0' : ''"
          @click="goSearch"
        >
          <img src="@/static/img/login/icon_search_white.png" alt="" />
          <span class="search-text">搜索</span>
        </div>
        <div class="personal-info">
          <client-only>
            <el-dropdown
              @command="handleCommand"
              v-if="$store.state.user.token"
            >
              <span class="el-dropdown-link">
                <el-image
                  :src="$store.state.user.headImg || headImg"
                  class="personal-img"
                  fit="cover"
                >
                  <div slot="error" class="image-slot">
                    <img src="@/static/img/user/headImg.jpg" alt="" />
                  </div>
                </el-image>
                <div
                  class="user-name"
                  :title="$store.state.user?.info?.user_info?.name"
                >
                  {{ $store.state.user?.info?.user_info?.name }}
                </div>
              </span>
              <template>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="item in menuList"
                    :key="item.name"
                    :command="item.command"
                  >
                    {{ item.name }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <img
              v-else
              @click="login"
              class="personal-img"
              src="@/static/img/login/icon_ren.png"
              alt=""
            />
            <img
              v-show="!extendHeader"
              @click="handleMore"
              class="more"
              src="@/static/img/login/icon_menu.png"
            />
            <img
              v-show="extendHeader"
              @click="handleMore"
              class="more"
              src="@/static/img/login/icon_close.png"
            />
            <!-- <login /> -->
          </client-only>
          <login />
        </div>
      </div>
      <div v-else>
        <div class="container">
          <div class="header">
            <div class="left-logo">
              <div class="text">艺览天下之海淀</div>
            </div>
            <div class="right">
              <img
                @click="goSearch"
                class="search"
                src="@/static/img/login/icon_search_white@2x.png"
                alt=""
              />
              <client-only v-if="$store.state.user.token">
                <el-dropdown @command="handleCommand">
                  <span class="el-dropdown-link">
                    <el-image
                      :src="$store.state.user.headImg || headImg"
                      class="personal-img"
                      fit="cover"
                    >
                      <div slot="error" class="image-slot">
                        <img src="@/static/img/user/headImg.jpg" alt="" />
                      </div>
                    </el-image>
                  </span>
                  <template>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        v-for="item in phoneMenuList"
                        :key="item.name"
                        :command="item.command"
                      >
                        {{ item?.name }}
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </client-only>
              <img
                v-else
                @click="login"
                class="personal-img"
                src="@/static/img/login/icon_ren.png"
                alt=""
              />
              <img
                v-show="!extendHeader"
                @click="handleMore"
                class="more"
                src="@/static/img/login/icon_menu.png"
              />
              <img
                v-show="extendHeader"
                @click="handleMore"
                class="more"
                src="@/static/img/login/icon_close.png"
              />
            </div>
          </div>
          <div :class="['bgc-header', extendHeader ? 'extend-header' : '']">
            <div v-show="extendHeader" class="new-custom-menu">
              <div
                v-for="(item, index) in myMenu"
                :key="item.path"
                @click="handleRouter(item.path)"
                class="chinese"
              >
                <nuxt-link class="nav-link" :to="item.path">
                  {{ item.meta.title }}
                </nuxt-link>
              </div>
            </div>
          </div>
          <div
            class="menu"
            v-show="activeRouteList?.includes($store.state.router.activeRouter)"
          >
            <client-only>
              <van-tabs v-model="activeRouter" @click="go">
                <van-tab
                  v-for="item in myMenu"
                  :key="item.path"
                  :title="item.meta.title"
                  :name="item.path"
                >
                </van-tab>
              </van-tabs>
            </client-only>
          </div>
        </div>
      </div>
      <!-- <div class="new" v-show="extendHeader">

      </div> -->
      <!-- 子路由 -->
      <nuxt-child
        keep-alive
        :keep-alive-props="{
          include: [
            'onlineVideo',
            'artist',
            'Home',
            'artWork',
            'artShop',
            'dynamic',
            'about',
          ],
        }"
        class="main"
      />
      <!-- 底部 -->
      <div
        class="g-footer"
        v-if="
          $store.state.router.activeRouter != '/register' &&
          $store.state.router.activeRouter != '/search'
        "
      >
        <div class="title">艺览天下之海淀</div>
        <div class="info">
          <div class="telphone">
            <i class="el-icon-phone" v-if="$ua.isFromPc()"></i>
            <span class="text">183 4001 1959</span>
          </div>
          <div class="address">
            <i class="el-icon-location" v-if="$ua.isFromPc()"></i>
            <span class="text"> 北京市丰台区总部基地26号院5号楼 </span>
          </div>
        </div>
        <div v-if="!$ua.isFromPc()" class="know-us">
          <div class="second-title">
            <div class="little-title">了解我们</div>
            <ul class="content">
              <li>关于我们</li>
              <li>工作机会</li>
              <li>网站地图</li>
            </ul>
          </div>
          <div class="second-title">
            <div class="little-title">支持帮助</div>
            <ul class="content">
              <li>联系我们</li>
              <li>艺术管家</li>
              <li>物流说明</li>
            </ul>
          </div>
          <div class="second-title">
            <div class="little-title">合作</div>
            <ul class="content">
              <li>作品征集</li>
              <li>合作入驻</li>
            </ul>
          </div>
        </div>
        <div v-if="$ua.isFromPc()" class="second-title">
          <div class="little-title">了解我们</div>
          <ul class="content">
            <li>关于我们</li>
            <li>工作机会</li>
            <li>网站地图</li>
          </ul>
        </div>
        <div v-if="$ua.isFromPc()" class="second-title">
          <div class="little-title">支持帮助</div>
          <ul class="content">
            <li>联系我们</li>
            <li>艺术管家</li>
            <li>物流说明</li>
          </ul>
        </div>
        <div v-if="$ua.isFromPc()" class="second-title">
          <div class="little-title">合作</div>
          <ul class="content">
            <li>作品征集</li>
            <li>合作入驻</li>
          </ul>
        </div>
        <div class="QR-code">
          <img src="@/static/img/ycewm.jpg" alt="" class="img" />
        </div>
        <div class="footer">
          <span class="first" @click="redirectTo">京ICP备18008697号-2 </span>
          技术支持单位：北京乙成科技文化发展有限公司
          <span class="line" v-if="$ua.isFromPc()">|</span>
          <span>用户协议</span>
          <span class="line">|</span>
          <span>免责声明</span>
          <span class="line">|</span>
          <span>隐私政策</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import login from "@/pages/login";
import menuList from "./constant/headMenu";
import { getToken } from "@/utils/auth";
export default {
  // scrollToTop: true,
  name: "LayoutIndex",
  components: {
    login,
  },
  data() {
    return {
      routes: [],
      // myMenu: [],
      menuList,
      phoneMenuList: [
        {
          name: "退出登陆",
          command: "logout",
        },
      ],
      newSearch: "",
      scrollTop: 0, // 滚动条距离顶部的距离
      extendHeader: false, // 是否展开顶部导航栏
      headImg: require("@/static/img/user/headImg.jpg"),
      searchList: ["油画", "文艺复兴", "热点文章"],
      activeRouteList: [
        "/home",
        "/artwork",
        "/artist",
        "/onLineVideo",
        "/artShop",
        "/dynamic",
        "/about",
      ],
      active: "2",
      activeRouter: "",
    };
  },
  middleware({ store, route, redirect, params, query, req, res }) {
    console.log("监听路由变化", route);
    // store：状态树信息
    // route：目标路由信息
    // redirect：重定向路由
    // params, query 参数
    // 每次路由跳转前都会执行此方法，可根据需要做处理
    // 如：校验参数是否合法、store是否有值，用户是否有访问权限 ...
  },
  async asyncData({ $ua, route, store, req, $api, ctx }) {
    console.log("路由变化");

    const res = await $api.getMenu({});
    // console.log('菜单', res.result.item_list)
    store.commit("router/setRoute", res.result.item_list);
    // 获取当前选择的路由是什么，并修改menu组件的高亮菜单
    store.commit("router/setActiveRoute", { activeRouter: route.path });
    store.commit("router/setIspc", { isPc: $ua.isFromPc() });
    return {};
  },
  fetch({ $api }) {},
  created() {
    console.log("首次进入嘛");
  },
  watch: {
    "$route.path"(val) {
      this.$store.commit("router/setActiveRoute", { activeRouter: val });
      this.activeRouter = this.$store.state.router.activeRouter;
      if (!getToken() && this.$store.state.user.headImg) {
        this.logout();
        this.$message.error("登陆状态已过期，请重新登录");
      }
    },
  },
  async mounted() {
    const res = await this.$api.getMenu({});
    this.$store.commit("router/setRoute", res.result.item_list);
    // 获取当前选择的路由是什么，并修改menu组件的高亮菜单
    // this.$store.commit("router/setActiveRoute", { activeRouter: this.$rout });
    this.$store.commit("router/setIspc", { isPc: this.$ua.isFromPc() });
    this.$store.commit("router/setActiveRoute", {
      activeRouter: "/" + location.pathname.replaceAll("/", ""),
    });
    this.activeRouter = this.$store.state.router.activeRouter;
    if (!getToken() && this.$store.state.user.headImg) {
      this.logout();
      this.$message.error("登陆状态已过期，请重新登录");
    }
    // this.getMenu()
    // const myMenu = this.$store.state.router.router[0].children.filter(
    //   (item) => {
    //     return !item.redirect && item.meta;
    //   }
    // )
    // this.myMenu = JSON.parse(JSON.stringify(myMenu))
    // console.log('this.myMenu')
    // this.headMenu.slice(1).reverse().forEach((item, index) => {
    //   this.myMenu.forEach((ele, i) => {
    //     if (index == i) {
    //       ele.meta.title = item.menu_name
    //     }
    //   })
    // })
    // 刷新页面的时候window.onscroll里面的代码没有执行 所以加上这条 滚动以后执行滚动后的代码
    this.scrollTop =
      document.documentElement.scrollTop || document.body.scrollTop;
    // this.$api.register({ t: "1", a: "2" }, { ver_code: 0 });
    window.onscroll = () => {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      this.scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // //变量windowHeight是可视区的高度
      // this.windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
      // //变量scrollHeight是滚动条的总高度
      // this.scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
      //   //滚动条到底部的条件
      //   if(scrollTop+windowHeight==scrollHeight){
      //   //写后台加载数据的函数
      //     console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
      //   }
      // console.log(this.scrollTop);
    };
  },
  computed: {
    myMenu() {
      const router = this.$store.state.router.router[0].children.filter(
        (item) => {
          return !item.redirect && item.meta;
        }
      );
      return router;
    },
    // showMenuList() {
    //   let menuList = [];
    //   console.log('this.$store.state.user.info.user_type == 0', this.$store.state.user.info?.user_info.user_type)
    //   if (this.$store.state.user.info.user_info.user_type == 0) {
    //     menuList = this.menuList.filter(item => {
    //       return item.command != 'uploadWorks'
    //     })
    //     return menuList
    //   } else {
    //     return this.menuList
    //   }
    // }
  },
  methods: {
    handleCommand(command) {
      switch (command) {
        case "homePage":
          console.log(
            "/applyArtist",
            this.$store.state.user?.info?.user_info.art_info?.data_id
          );
          // if (this.$store.state.user?.info.user_info.art_info?.data_id) {
          this.$router.push({
            path: "/personal",
            query: {
              id: this.$store.state.user?.info?.user_info.art_info.data_id,
            },
          });
          break;
        // this.$store.commit('user/SET_PERSONAL_ID', this.$store.state.user?.info.user_info.data_id)
        case "logout":
          this.logout();
          break;
        case "personalInfo":
          this.$router.push("/editPersonalHome/personalInfo");
          break;
        case "collect":
          this.$router.push({
            path: "/followMessage",
            query: { menuActive: 0 },
          });
          break;
        case "follow":
          this.$router.push({
            path: "/followMessage",
            query: { menuActive: 1 },
          });
          break;
        case "message":
          this.$router.push({
            path: "/followMessage",
            query: { menuActive: 2 },
          });
          break;
        case "draftBox":
          this.$router.push({
            path: "/editPersonalHome",
            query: { menuActive: 3 },
          });
          break;
        case "uploadWorks":
          this.$router.push({ path: "/editPersonalHome" });
      }
    },
    handleSearch(item) {
      this.$router.push({ path: "/search", query: { search: item } });
      this.extendHeader = false;
    },
    logout() {
      this.$store.dispatch("user/logout");
      this.$router.push("/home");
    },
    // 点击导航栏菜单的时候
    handleSelect(key, keyPath) {
      this.$router.push({ path: key });
    },
    // 点击头像登陆
    login() {
      if (this.$ua.isFromPc()) {
        if (!this.$store.state.user.token) {
          // 登陆窗口统一由vuex控制
          this.$store.commit("user/SET_LOGIN", true);
        }
      } else {
        this.$router.push("/login");
      }
    },
    // 点击头像右侧的更多
    handleMore() {
      this.extendHeader = !this.extendHeader;
    },
    // 点击更多以后展开的导航栏菜单
    handleRouter(name, title) {
      this.extendHeader = !this.extendHeader;
      // this.$router.push({path: name})
      // this.$store.commit('router/setActiveRoute', { activeRouter: path })
    },
    go(name, title) {
      this.$router.push({ path: name });
    },
    // 打开搜索页面
    goSearch() {
      this.$router.push("/search");
    },
    // 点击备案号打开工信部网站
    redirectTo() {
      window.open("https://beian.miit.gov.cn/");
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  &.z-web {
    background-color: #f5f5f5;

    ::v-deep(.el-dropdown-menu) {
      width: 140px;
    }

    ::v-deep(.el-dropdown-menu__item) {
      color: #333;
      font-size: 16px;

      &:nth-child(8) {
        border-top: 1px solid #f5f5f5;
      }
    }

    .container {
      width: 100%;
      // min-width: 1300px;
      // height: 100vh;

      ::v-deep(.el-menu.el-menu--horizontal) {
        border: 0;
      }

      ::v-deep(.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover) {
        background: transparent;
        color: #fff;
        border-bottom: 0;
      }

      ::v-deep(.el-menu--horizontal > .el-menu-item.is-active) {
        background: transparent;
        color: #fff;
        border-bottom: 0;
      }

      ::v-deep(.el-menu--horizontal > .el-menu-item) {
        border-bottom: 0;
        font-size: 24px;
        font-family: Source Han Serif SC;
        font-weight: 600;
        // color: #FFFFFF;
        // line-height: 30px;
      }

      @media screen and (max-width: 1300px) {
        .header {
          min-width: 1100px !important;
          min-height: 80px !important;
        }
      }
      @media screen and (max-width: 800px) {
        .header {
          width: 100% !important;
          min-height: 80px !important;
        }
        ::v-deep(.el-menu--horizontal > .el-menu-item) {
          padding: 0 8px;
        }
      }

      .header {
        width: 100%;
        height: 128px;
        // display: flex;
        // justify-content: space-around;
        background: rgb(115 112 113);
        position: fixed;
        top: 0;
        z-index: 999;
        transition: height 1s;

        &.new-header {
          background: #fff;

          .custom-menu .el-menu-demo {
            background: #fff;
          }

          ::v-deep(.el-menu--horizontal > .el-menu-item.is-active) {
            background: transparent;
            color: #000;
          }

          ::v-deep(
              .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover
            ) {
            background: transparent;
            color: #000;
          }
        }

        &.extend-header {
          height: 100vh;
          background: transparent url("@/static/img/login/menu_bg.png")
            no-repeat;
          // background-color: transparent;
          background-size: cover;
          // background-repeat: no-repeat;
          // background-image: url('@/static/img/login/menu_bg.png');
          overflow: hidden;
        }

        // &.art-header {
        //   background: #000;
        //   opacity: 0.5;
        // }

        .more {
          cursor: pointer;
        }

        .logo {
          margin-left: 132px;
          float: left;
          height: 100%;
          display: flex;
          align-items: center;

          .text {
            // width: 332px;
            font-size: 36px;
            font-family: Source Han Serif SC;
            font-weight: 800;
            color: #dfcbb6;
            // margin-top: 10px;
            margin-right: 300px;
            // float: left;
            // line-height: 60px;
          }

          @media screen and (max-width: 1500px) {
            .text {
              margin-right: 150px;
            }
          }
          @media screen and (max-width: 800px) {
            .text {
              margin-right: 0;
            }
          }

          .search {
            max-width: 332px;
            margin-top: 200px;
            display: block;

            ::v-deep(.el-input__inner) {
              background-color: transparent;
              border-top: 0;
              border-left: 0;
              border-right: 0;
            }

            ::v-deep(.el-input__inner:focus) {
              border-color: #dcdfe6;
            }

            .hot-search {
              display: flex;
              color: #fff;
              margin-top: 26px;

              .title {
                display: inline-block;
                word-break: keep-all;
              }

              .desc {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: space-between;
                // flex: 0 0 30px;

                span {
                  display: block;
                  // width: 33%;
                  // height: 16px;
                  text-align: center;
                  // margin-right: 27px;
                  float: left;
                  margin-bottom: 26px;
                  cursor: pointer;

                  &:nth-child(3n) {
                    margin-right: 0;
                  }
                }
              }
            }
          }
        }

        .personal-info {
          ::v-deep(.el-dropdown) {
            text-align: center;
          }
          position: absolute;
          right: 30px;
          width: 120px;
          height: 100%;
          margin-top: 45px;
          font-size: 12px;
          color: #fff;

          .user-name {
            font-size: 12px;
            color: #fff;
            width: 60px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .personal-img {
            cursor: pointer;
          }

          img {
            width: 37px;
            vertical-align: top;
          }

          ::v-deep(.el-image) {
            cursor: pointer;
            width: 37px;
            margin-right: 10px;
            border-radius: 50%;
          }
        }

        .custom-menu {
          display: flex;
          float: left;
          min-width: 600px;
          // margin-left: 300px;
          align-items: center;
          height: 100%;

          .el-menu-demo {
            float: left;
            // display: inline-block;
            background: rgb(115 112 113);
          }
        }

        @media screen and (max-width: 800px) {
          .custom-menu {
            display: flex;
            float: left;
            max-width: 50%;
            // margin-left: 300px;
            align-items: center;
            height: 100%;

            .el-menu-demo {
              float: left;
              // display: inline-block;
              background: rgb(115 112 113);
            }
          }
        }

        .new-custom-menu {
          margin-top: 240px;
          margin-left: 153px;
          float: left;
          white-space: nowrap;
          color: #fff;
          position: relative;
          z-index: 999;

          div {
            writing-mode: vertical-lr;
          }

          .chinese {
            vertical-align: text-top;
            display: inline-block;
            font-size: 43px;
            margin-right: 75px;
            font-family: Source Han Serif SC;
            letter-spacing: 10px;

            .nav-link {
              color: #fff;
            }

            &:last-child {
              margin-right: 0;
            }
          }
        }

        .search-btn {
          height: 100%;
          float: left;
          display: flex;
          align-items: center;
          font-size: 16px;
          cursor: pointer;
          // display: inline-block;

          .search-text {
            font-size: 16px;
            font-family: Source Han Serif SC;
            color: #fff;
          }
        }
      }

      .main {
        margin-top: 128px;
      }

      .g-footer {
        padding: 0 270px 60px;
        background-color: #fff;
        .title {
          display: block;
          font-size: 36px;
          font-family: Source Han Serif SC;
          font-weight: 800;
          color: #aa9884;
          margin-bottom: 64px;
        }

        .info {
          width: 300px;
          display: inline-block;
          font-size: 16px;
          font-family: Source Han Serif SC;
          font-weight: 600;
          color: #000000;
          margin-bottom: 120px;

          .telphone {
            margin-bottom: 25px;
          }
        }

        .second-title {
          display: inline-block;
          vertical-align: top;
          margin-left: 100px;
          color: #000;

          .little-title {
            font-size: 16px;
            font-family: Source Han Serif SC;
            font-weight: 800;
            margin-bottom: 25px;
          }

          .content {
            font-size: 16px;
          }
        }

        .QR-code {
          width: 106px;
          height: 106px;
          float: right;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .footer {
          font-size: 16px;
          color: #000;

          .line {
            opacity: 0.8;
          }

          .first {
            cursor: pointer;
          }
        }
      }
    }
  }

  &.z-phone {
    ::v-deep(.van-tabs__nav--line.van-tabs__nav--complete) {
      background-color: #000;
    }

    ::v-deep(.van-tab) {
      color: #fff;
      background-color: #000;
    }

    // ::v-deep(.van-tabs--line .van-tabs__wrap) {
    //   background-color: #000;
    // }

    // ::v-deep(.van-tabs) {
    //   background-color: #000;
    // }

    .main {
      margin-top: pxtorem(176);
    }

    ::v-deep(.van-tabs__nav) {
      background-color: #000;
    }
    .header {
      width: 100%;
      height: pxtorem(88);
      // display: flex;
      // justify-content: space-around;
      background: #000;
      position: fixed;
      top: 0;
      z-index: 1001;
      padding: 0 pxtorem(25);
      display: flex;
      align-items: flex-end;
      justify-content: space-between;

      .left-logo {
        // margin-left: 132px;
        float: left;
        height: 100%;
        display: flex;
        align-items: center;
        .text {
          font-size: pxtorem(25);
          // font-family: Source Han Serif SC;
          font-weight: 800;
          color: #dfcbb6;
        }
      }

      .right {
        height: 100%;
        display: flex;
        align-items: center;

        .search,
        .personal-img,
        .more {
          width: pxtorem(60);
          height: pxtorem(60);
          margin-left: pxtorem(32);
          cursor: pointer;
        }

        .personal-img {
          border-radius: 50%;
          vertical-align: bottom;
        }
      }

      .more {
        cursor: pointer;
      }
    }

    .bgc-header {
      height: pxtorem(1);
      width: 100%;
      transition: all 1s;
      position: fixed;
      top: 0;
    }

    .extend-header {
      width: 100%;
      height: 100vh;
      background: transparent url("@/static/img/login/menu_bg.png") no-repeat;
      // background-color: transparent;
      // background-size: cover;
      // background-repeat: no-repeat;
      // background-image: url('@/static/img/login/menu_bg.png');
      overflow: hidden;
      transition: all 1s;
      z-index: 1000;
      overflow: hidden;

      .new-custom-menu {
        margin-top: pxtorem(285);
        // margin-left: 153px;
        // float: left;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        // white-space: nowrap;
        color: #fff;

        &::after {
          content: "";
          flex: 0 0 25%;
        }

        div {
          writing-mode: vertical-lr;
        }

        .chinese {
          vertical-align: text-top;
          display: flex;
          align-items: center;
          font-size: pxtorem(48);
          // margin-right: 75px;
          letter-spacing: 10px;
          flex: 25%;
          margin-bottom: pxtorem(155);

          .nav-link {
            color: #fff;
          }

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }

    .menu {
      background-color: #000;
      width: 100%;
      height: pxtorem(88);
      position: fixed;
      top: pxtorem(88);
      z-index: 999;

      ::v-deep(.van-tab) {
        flex: none;
      }

      ::v-deep(.van-tabs__line) {
        // display: none;
        width: pxtorem(28);
        border-radius: 0;
        background-color: #dfcbb6;
      }
    }

    .g-footer {
      color: #000;
      font-size: pxtorem(24);
      font-weight: 600;
      // padding: 0 pxtorem(174);

      .title {
        width: pxtorem(400);
        text-align: center;
        display: block;
        font-size: pxtorem(36);
        font-family: Source Han Serif SC;
        font-weight: 800;
        color: #aa9884;
        margin: 0 auto pxtorem(28);
      }

      .info {
        width: pxtorem(400);
        display: block;
        margin: 0 auto pxtorem(40);
        text-align: center;
        .telphone {
          margin-bottom: pxtorem(23);
        }
      }

      .know-us {
        width: pxtorem(400);
        margin: 0 auto pxtorem(40);
        display: flex;
        justify-content: space-between;

        .second-title {
          display: inline-block;
          vertical-align: top;

          .content {
            font-weight: 500;
          }
        }
      }

      .QR-code {
        margin-bottom: pxtorem(35);
        text-align: center;

        .img {
          width: pxtorem(180);
          height: pxtorem(180);
        }
      }

      .footer {
        width: pxtorem(518);
        font-weight: 500;
        text-align: center;
        margin: 0 auto;
        font-size: pxtorem(16);

        .first {
          display: block;
          margin-bottom: pxtorem(12);
          cursor: pointer;
        }
      }
    }
  }
}
</style>
